<!DOCTYPE html>
<html lang="zh-Hans-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width" />
    <title>达拉崩吧的个人博客</title>
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/font-awesome/css/font-awesome.min.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/css/index_style.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/css/animate.min.css}" rel="stylesheet" type="text/css">
</head>
<body>
    <div id="menu" class="hover_animation menu_open" data-mark="false">
        <span></span>
        <span></span>
        <span></span>
    </div>
    <div id="navgation" class="navgation navgation_close">
        <ul class="point">
            <li><a th:href="@{/index}">首页</a></li>
            <li><a th:href="@{/blogs}">博客</a></li>
            <li><a th:href="@{/message}">留言</a></li>
            <li><a th:href="@{/admin/blogs}" target="_blank">后台</a></li>
        </ul>
        <div class="logo"><a>DLBB</a></div>
    </div>
    <div class="section" id="section1">
        <div class="fp-tablecell">
            <div class="page1">
                <div class="nav wow zoomIn" data-wow-duration="2s">
                    <h1>达拉崩吧</h1>
                    <p>巨龙还未倒下，英雄正在脱发</p>
                    <a class="layui-btn layui-btn-normal" style="margin-top: 20px" th:href="@{/blogs}">Enter Blog</a>
                </div>
                <a class="next wow fadeInUp" data-wow-duration="2s" id="next"></a>
            </div>
        </div>
    </div>
    <div class="section" id="section2">
        <div class="fp-tablecell">
            <div class="page2">
                <div class="warp-box">
                    <div class="new-article">
                        <div class="inner wow fadeInDown" data-wow-delay=".2s">
                            <h1>热门文章</h1>
                            <p>
                                现在无法触碰的难过，将来可以当作笑话去讲。
                                <br>时间不能改变你的故事内容，却可以改变你的叙述方式
                            </p>
                        </div>
                    </div>
                    <div class="layui-row">
                        <div class="layui-col-xs12 layui-col-sm4 layui-col-md4  wow fadeInUp" style="padding: 0 10px">
                            <div class="single-news">
                                <div class="news-head">
                                    <img th:src="${blogs[0].firstPicture}">
                                    <a th:href="@{/read/{id}(id=${blogs[0].id})}" class="link"><i class="fa fa-link"></i></a>
                                </div>
                                <div class="news-content">
                                    <h4>
                                        <a th:href="@{/read/{id}(id=${blogs[0].id})}" th:text="${blogs[0].title}">
                                            标题
                                        </a>
                                    </h4>
                                    <div class="date" th:text="${#dates.format(blogs[0].createTime,'yyyy-MM-dd')}">
                                        2022年3月02日
                                    </div>
                                    <a th:href="@{/read/{id}(id=${blogs[0].id})}" class="btn">
                                        阅读更多 
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-xs12 layui-col-sm4 layui-col-md4  wow fadeInUp" data-wow-delay=".2s" style="padding: 0 10px">
                            <div class="single-news">
                                <div class="news-head">
                                    <img th:src="${blogs[1].firstPicture}">
                                    <a th:href="@{/read/{id}(id=${blogs[1].id})}" class="link"><i class="fa fa-link"></i></a>
                                </div>
                                <div class="news-content">
                                    <h4>
                                        <a th:href="@{/read/{id}(id=${blogs[1].id})}" th:text="${blogs[1].title}">
                                            标题
                                        </a>
                                    </h4>
                                    <div class="date" th:text="${#dates.format(blogs[1].createTime,'yyyy-MM-dd')}">
                                        2022年3月02日
                                    </div>

                                    <a th:href="@{/read/{id}(id=${blogs[1].id})}" class="btn">
                                        阅读更多 
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-xs12 layui-col-sm4 layui-col-md4  wow fadeInUp" data-wow-delay=".4s" style="padding: 0 10px">
                            <div class="single-news">
                                <div class="news-head">
                                    <img th:src="${blogs[2].firstPicture}">
                                    <a th:href="@{/read/{id}(id=${blogs[2].id})}" class="link"><i class="fa fa-link"></i></a>
                                </div>
                                <div class="news-content">
                                    <h4>
                                        <a th:href="@{/read/{id}(id=${blogs[2].id})}" th:text="${blogs[2].title}">
                                            标题
                                        </a>
                                    </h4>
                                    <div class="date" th:text="${#dates.format(blogs[2].createTime,'yyyy-MM-dd')}">
                                        2022年3月02日
                                    </div>

                                    <a th:href="@{/read/{id}(id=${blogs[2].id})}" class="btn">
                                        阅读更多 
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="section" id="section3">
        <div class="fp-tablecell">
            <div class="page3">
                <div class="warp-box">
                    <div class="warp">
                        <div class="inner">
                            <div class="links">
                                <ul>
                                    <li class="wow fadeInLeft"><a th:href="@{/blogs}">博客分类</a></li>
                                    <li class="wow fadeInRight"><a th:href="@{/message}">给我留言</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="section" id="section4">
        <div class="fp-tablecell">
            <div class="page4">
                <div class="warp-box">
                    <div class="about">
                        <div class="inner">
                            <h1 class="wow fadeInLeft">畅想未来</h1>
                            <p class="wow fadeInRight">
                                过去的遗憾，皆需要未来的成果来弥补。希望走到尽头那一刻，能感慨一句“不虚此行”！
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <footer class="footer wow fadeInUp" id="contact">
        <div class="footer-top">
            <div class="container">
                <div class="layui-row">
                    <div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
                        <div class="single-widget about">
                            <div class="footer-logo">
                                <h2>达拉崩吧</h2>
                            </div>
                            <p>巨龙还未倒下，英雄正在脱发。</p>
                            <div class="button">
                                <a th:href="@{/about}" class="btn layui-btn layui-btn-normal">About</a>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
                        <div class="single-widget">
                            <h2>相关链接</h2>
                            <ul class="social-icon">
                                <li class="active"><a th:href="@{/blogs}"><i class="fa fa-book"></i>文章</a></li>
                                <li class="active"><a th:href="@{/message}"><i class="fa fa-comments"></i>留言</a></li>
                                <li class="active"><a th:href="@{/friend}"><i class="fa fa-share"></i>友链</a></li>
                                <li class="active"><a th:href="@{/diary}"><i class="fa fa-files-o"></i>日记</a></li>
                                <li class="active"><a th:href="@{/admin}" target="_blank"><i class="fa fa-fire"></i>后台管理</a></li>
                            </ul>                   
                        </div>
                    </div>
                    <div class="layui-col-xs12 layui-col-sm12 layui-col-md4">
                        <div class="single-widget contact">
                            <h2>联系我</h2>
                            <ul class="list">
                                <li><i class="fa fa-map"></i>地址: 重庆市合川区</li>
                                <li><i class="fa fa-envelope"></i><a href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=44_Lh4KPgoGGjYSBgqOSks2AjI4">邮箱: lhdalabengba@qq.com</a></li>
                                <li><i class="fa fa-github"></i><a target="_blank" href="https://github.com/dalabengbadian/my-blog">
                                    https://github.com/dalabengbadian/my-blog</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="copyright">
            <div class="container">
                <div class="layui-row">
                    <div class="layui-col-xs12 layui-col-sm12 layui-col-md12 text-center">
                        <a style="color:white" href="https://beian.miit.gov.cn/" target="_blank">渝ICP备2022003536号-1</a>
                    </div>
                </div>
            </div>
        </div>  
    </footer>
    <script th:src="@{/layui/layui.js}"></script>
    <script th:src="@{/js/wow.min.js}"></script>
    <script th:src="@{/js/index.js}"></script>
</body>
</html>